<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue 作业1</title>
    <style>
        .color-1 {
            color: red;
        }
        .color-2 {
            color: green;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>效果一：点击菜鸟教程链接到菜鸟教程官网</h3>
    <h4><a :href="url" :target="target">菜鸟教程</a></h4>
    <h3>效果二：点击显示时间获取当前时间并显示</h3>
    <h4>当前时间：{{nowtime}}</h4>
    <button @click="showTime()">显示时间</button>
    <h3>效果三：点击隐藏按钮隐藏下面这句话</h3>
    <h4 v-if="seen">“人生中出现的一切，都无法拥有，只能经历。“</h4>
    <button @click="hid()">隐藏</button>
    <h3>效果四：点击更换颜色按钮更换字体颜色为绿色，同时“红色”二字更换为“绿色”</h3>
    <h4 :class="colorstyle">我现在是{{color}}</h4>
    <button @click="changeColor()">更换颜色</button>
    <h3>效果五：每点击一次 Add 按钮，句子中的数字加 1</h3>
    <h4>下面的按钮被点击了{{num}}次</h4>
    <button @click="num += 1">Add</button>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            url: "http://www.runoob.com",
            target: "_blank",
            nowtime: "",
            seen: true,
            color: "红色",
            colorstyle: "color-1",
            num: 0
        },
        methods: {
            showTime: function () {
                var date = new Date();
                this.nowtime = date.toLocaleString();
            },
            hid: function () {
                this.seen = false;
            },
            changeColor: function () {
                this.colorstyle = "color-2"
                this.color = "绿色"
            }
        }
    });
</script>
</body>
</html>